<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/includes.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://app.mapabc.com/apis?&t=flashmap&v=2.2&key=c282cabeeb2aca73b3fac4efe5606e7d0fc66a65bda8485bae19b4ce2363409dd861346a584f4031" type="text/javascript">
<script src="mapapi.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/jQuery.bMap.1.3.1.min.js"></script>
<style type="text/css">
#layerBar div{ padding:2px 0; cursor:pointer }
#layerBar div:hover{ text-decoration:underline }
#buttons{ clear:both;text-align:center }
.bLyrHide{ color:#ddd; } /* class for hidden layerBar layers */
</style>
<script type="text/javascript">
//https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false
    $(document).ready(function(){ 
		$("#map").bMap({
			mapZoom: 12,
			//mapCenter:[51.501690392607,-0.1263427734375],
			mapCenter:[31.988084,118.889064],
			mapLayerbar:"layerBar" //Tell bMap to use a sidebar
		});
	});
	//点
	function button1(){
		$('#map').data('bMap').insertMarkers({"data":[{"lat":51.49757618329838,"lng":-0.1746654510498047,"title":"Science Museum","body":"Exhibition Road, London SW7"},{"lat":51.47769451182406,"lng":-0.0009441375732421875,"title":"Royal Observatory Greenwich","body":"Blackheath Ave, Greenwich, London SE10"}]});
	}
	//线条
	function addline(data){
		//$('#map').data('bMap').insertLine({"data":[{"lat":51.49757618329838,"lng":-0.1746654510498047},{"lat":51.47769451182406,"lng":-0.0009441375732421875}]});
		//$('#map').data('bMap').insertLine({"data":[{"lat":31.990025,"lng":118.884071},{"lat":31.990082,"lng":118.884171}]});
		$('#map').data('bMap').insertLine(data);
	}		
	//区域
	function button3(){
		$('#map').data('bMap').insertPolygon({"color":"#F00","data":[{"lat":51.51921169524832,"lng":-0.19947052001953125},{"lat":51.52540664057756,"lng":0.01819610595703125},{"lat":51.46063853898322,"lng":0.0295257568359375},{"lat":51.45507659279715,"lng":-0.19191741943359375},{"lat":51.51921169524832,"lng":-0.19947052001953125}]});
	}
	
	//var data = {"data":[{"lat":31.990025,"lng":118.884071},{"lat":31.990082,"lng":118.884171}]};
	var data = { "opacity": 0.7,"weight":3,"data":[<c:forEach var="p" items="${gpsCarHisList}" varStatus="xh"> <c:if test="${xh.index != 0}">,</c:if>{"lat":${p.cla - 0.0021},"lng":${p.clo + 0.0051}}</c:forEach>]};
	
	function setIcon(clo,cla,title,body,icon){
		$('#map').data('bMap').insertMarkers({"data":[{"lat":cla,"lng":clo,"title":title,"body":body,"icon":icon}]});
	}
	
	$(document).ready(function(){
		addline(data);
		setIcon(${startPoint.clo + 0.0051},${startPoint.cla - 0.0021},"起点","<fmt:formatDate value='${startPoint.ctime}' pattern='yyyy-MM-dd HH:mm:ss'/>","img/icon/qd.gif");
		setIcon(${endPoint.clo + 0.0051},${endPoint.cla - 0.0021},"终点","<fmt:formatDate value='${endPoint.ctime}' pattern='yyyy-MM-dd HH:mm:ss'/>","img/icon/zd.gif");
	});
</script>
</head>
<body>
	<table style="height:100%;width:100%">
		<tr>
			<td style="height:30px;background:#EEF">
				<form action="carhis.do">
				<table>
					<tr>
						<td style="height:40px">carid</td>
						<td>
							<select id="carid" name="carid" style="width:260px">
								<c:forEach var="device" items="${deviceList}">
									<option value="${device.carid }" title="${device.remark }" <c:if test="${carid == device.carid }" >selected</c:if> >${device.remark }&nbsp;${device.username }(${device.carid })</option>
								</c:forEach>
							</select>
						</td>
						<td>beginDate</td>
						<td><input class="textblock_date" name="beginDate" id="beginDate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'zh-cn'})" readonly="readonly" value="${beginDate }" /></td>
						<td>endDate</td>
						<td><input class="textblock_date" name="endDate" id="endDate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'zh-cn'})" readonly="readonly" value="${endDate }" /></td>
						<td><input type="submit" value="查询" /></td>
					</tr>
				</table>
				</form>
			</td>
		</tr>
		<tr>
			<td>
				<div id="map" style="width:100%;height:100%"></div>
			</td>
		</tr>
	</table>
</body>
</html>
